<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="reset.css"> -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3222288_9s82thm2tws.css">
    <link rel="stylesheet" href="购物车.css">
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="head">
            <div class="time"></div>
            <div class="name">
                <div class="d iconfont icon-fanhui"></div>
                <div class="namer">购物车</div>
                <div class="d iconfont icon-gengduo"></div>
            </div>
            <div class="nav">
                <div class="navigation">
                    <ul class="hq">
                        <li class="li">全部</li>
                        <li class="li">降价</li>
                        <li class="li">热卖</li>
                        <li class="li">分类</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="shop">
           <div class="shop-name"><span class="shop-sp"><input type="checkbox" v-model="item.checked" @change="changeOne"></span>小U自营</div>
           <div class="shop-right"><span class="freight">已免运费</span><span class="arch">领券</span></div>
        </div>
        <div  id="app">
            <div class="commodity" v-for="(item,index) in arr" :key="item.id">
                <div class="comm"><span class="shop-sp"><input type="checkbox"></span></div>
                <div class="comm-img1"></div>
                <div class="comm-message">
                    <div class="comm-nm">
                        <div class="comm-name">{{item.name}}</div>
                    </div>
                    <div class="comm-pf">
                        <div class="comm-price">¥ <span>{{item.price|filterPrice}}</span>距离加入降 ¥ 5.00</div>
                        <div class="comm-foot">
                            <div class="comm-number"><button @click="sub(index)">－</button> 1 <button @click="add(index)">＋</button></div>
                            <div class="comm-clear" @click="del(index)">🚮</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="foot">
                <div class="foot-price">
                    <div class="price-name"><span class="shop-sp"><input type="checkbox" v-model="allChecked" @change="changeAllChecked"></span>全选</div>
                    <div class="price-right">
                        <div class="sum">
                            <div class="total">合计</div>
                            <div class="free">已免运费</div>
                        </div>
                        <div class="price-money">
                            <div class="amount">{{allPrice |filterPrice}}</div>
                            <div class="discount">已优惠 ¥ 200元</div>
                        </div>
                        <div class="account">结算</div>
                    </div>
                </div>
                <div class="foot-bottom">
                    <div class="foot-img"><img src="images/商城.png" alt="" class="image"><p>商城</p></div>
                    <div class="foot-img"><img src="images/分类.png" alt="" class="image"><p>分类</p></div>
                    <div class="foot-img"><img src="images/购物车.png" alt="" class="image"><p>购物车</p></div>
                    <div class="foot-img"><img src="images/我的.png" alt="" class="image"><p>我的</p></div>
                </div>
            </div>
        </div>

    </div>
    <script>
        let mock = [{
                id: 1,
                name: "溪牧原山茶花洁面泡沫",
                price: 99,
                num: 1,

            },
            {
                id: 2,
                name: "电竞游戏机械键盘游戏专用吃",
                price: 299,
                num: 1,
            },
            {
                id: 3,
                name: "7080MT商用办公台式电脑...",
                price: 6099,
                num: 1,
            }
        ]
        Vue.filter("filterPrice", p => p.toFixed(2))
        let vm = new Vue({
            el: "#app",
            data: {
                arr: [],
                allChecked: false, 
            },
            mounted() {
                mock.forEach(item => item.checked = false)
                this.arr = mock;
            },
            methods: {
                del(index) {
                    this.arr.splice(index, 1)
                },

                add(index) {
                    this.arr[index].num++;
                    this.arr[index].num = Math.min(5, this.arr[index].num)
                },
                sub(index) {
                    this.arr[index].num--;
                    this.arr[index].num = Math.max(1, this.arr[index].num)
                },
                changeAllChecked() {
                    this.arr.forEach(item => item.checked = this.allChecked)
                },
                changeOne() {
                    this.allChecked = this.arr.every(item => item.checked)
                }

            },
            computed: {
                allPrice() {
                    return this.arr.reduce((val, item) => item.checked ? val + item.price * item.num : val, 0)
                }
            }
        })
    </script>
</body>
</html>